<template>
  <div>
    <div class="main_layout">
      <a-calendar v-model:value="value">
        <template #dateCellRender="{ current }">
          <ul class="events">
            <li v-for="item in getListData(current)" :key="item.Id">
              <template v-if="item.State == 0">
                <div class="tips">
                  {{ item.Name }}
                </div>
              </template>

              <template v-if="item.State == 1">
                <div class="tips_complete">
                  {{ item.Name }}
                </div>
              </template>
            </li>
          </ul>
        </template>
        <template #monthCellRender="{ current }">
          <div v-if="getMonthData(current)" class="notes-month">
            <section>{{ getMonthData(current) }}</section>
            <span>Backlog number</span>
          </div>
        </template>
      </a-calendar>
    </div>
  </div>
</template>


<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import orderHeaderVue from "../components/orderHeader.vue";
import { postJSON } from "../utils/request";
import { getYMD } from "../utils/tools";
export default defineComponent({
  components: {
    orderHeaderVue,
  },
  setup() {
    const value = ref();

    const Pagedata = reactive({
      arr: [],
    });

    onMounted(() => {
      postJSON("/MonthInfo").then((res) => {
        Pagedata.arr = res.data;
        console.log(Pagedata.arr);
      });
    });

    const getListData = (value) => {

      let listData = reactive([]);

      for (let i = 0; i < Pagedata.arr.length; i++) {
        if (
          value.format("YYYY/MM/DD") ==
          getYMD(new Date(Pagedata.arr[i].StartDate)).TimeData
        ) {
          listData.push(Pagedata.arr[i]);
        }
      }

      console.log('listData :>> ', listData);

      return listData || [];
    };

    const getMonthData = (value) => {
      if (value.month() === 8) {
        return 1394;
      }
    };

    return {
      value,
      getListData,
      getMonthData,
    };
  },
});
</script>


<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #ffffff;
  .tips {
    margin: 1%;
    background-color: #1d85e0;
    overflow: hidden;
    white-space: nowrap;
    width: 98%;
    text-overflow: ellipsis;
    font-size: 12px;
  }
  .tips_complete {
    margin: 1%;
    background-color: #94c5f0;
    overflow: hidden;
    white-space: nowrap;
    width: 98%;
    text-overflow: ellipsis;
    font-size: 12px;
  }
}

:deep(.ant-badge-status-text) {
  color: #ffffff;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
.main_layout {
  padding: 0 20px;
}
</style>